{extend name="public/layout"}
{block name="head"}
{:_css('static/css/weui.css')}
{:_css('css/weui2.css')}
{/block}
{block name="title"}业务预约{/block}
{block name="content"}
<div class="form mt10" id="form1">
    <div class="flex border-t border-b">
        <label for="contact">联系人</label>
        <div class="flex-con">
            <input type="text" class="form-control" name="contact" id="contact" placeholder="请输入联系人" value="{$m.contact}">
        </div>
    </div>
    <div class="flex border-b">
        <label for="identity">身份证号码</label>
        <div class="flex-con">
            <input type="text" class="form-control" name="identity" id="identity" placeholder="请输入身份证号码" value="{$m.identity}">
        </div>
    </div>
    <div class="flex border-b">
        <label for="telephone">手机号码</label>
        <div class="flex-con">
            <input type="tel" class="form-control" name="telephone" id="telephone" placeholder="请输入手机号码" value="{$m.telephone}">
        </div>
    </div>
    <div class="flex border-b">
        <label for="area_id">居住地址</label>
        <div class="flex-con">
            <input type="hidden" name="area_id" id="area_id" value="{$m.area_id}">
            <div type="text" class="form-control text-gray" id="area_name">{$m.area_name?:'请选择居住地址'}</div>
        </div>
        <div class="icon icon-down" id="area_name_down"></div>
    </div>
    <div class="border-b">
        <textarea name="address" id="address" class="form-control text-left" rows="3" placeholder="请填写详细地址(选填)">{$m.address}</textarea>
    </div>
    <div class="flex border-b">
        <label for="appoint_time">预约日期</label>
        <div class="flex-con">
            <input type="hidden" name="appoint_date" id="appoint_date_field" value="{$m.appoint_date}">
            <div type="text" class="form-control text-gray" id="appoint_date">{$m.appoint_date?:'请选择预约日期'}</div>
        </div>
        <div class="icon icon-down" id="appoint_date_down"></div>
    </div>
    <div class="flex border-b">
        <label for="appoint_time">预约时间</label>
        <div class="flex-con">
            <input type="hidden" id="appoint_time_hidden" name="appoint_time" value="{$m.appoint_time}">
            <div class="form-control text-gray" id="appoint_time">
                {$m.appoint_time?:'请选择预约时间'}
            </div>
        </div>
        <div class="icon icon-down" id="appoint_time-down"></div>
    </div>
    <div class="flex border-b">
        <label for="appoint_time">预约时长</label>
        <div class="flex-con">
            <input type="hidden" id="appoint_during_hidden" name="appoint_during" value="{$m.appoint_during}">
            <div class="form-control text-gray" id="appoint_during">{$m.appoint_during?$m.appoint_during.'分钟':'请选择时间长度'}</div>
        </div>
        <div class="icon icon-down" id="appoint_during_down"></div>
    </div>
    <div class="flex border-b">
        <label for="business_id">我需要办理的业务</label>
        <div class="flex-con">
            <input type="hidden" name="business_id" id="business_id" placeholder="请输入我需要办理的业务" value="{$m.business_id}">
            <div class="form-control text-gray" id="business_name">请选择办理的业务</div>
        </div>
        <div class="icon icon-down" id="business_name_down"></div>
    </div>
</div>
<div class="btn-area">
    <div id="submitBtn" class="bg-primary btn-block btn">保存提交</div>
</div>
{:_js('static/layermobile/layer.js')}
{:_js('js/phone.js')}

{:_js('static/js/zepto.min.js')}
{:_js('static/js/weui.js')}
{:_js('js/picker.js')}

<script>
    $(function () {
        (function () {
            var data = {:json_encode($area_list)};
            var pos = 0;
            var v = '{$m.area_id}';
            if(v){
                var label = '';
                for(var i=0,l=data.length;i<l;i++){
                    if(data[i].value == v){
                        pos = i;
                        label = data[i].label;
                        break;
                    }
                }
                if(label){
                    $('#area_name').text(label);
                }
            }
            $('#area_name,#area_name_down').on('click', function () {
                weui.picker(data, {
                    id:'area_name',
                        title:'选择居住地址',
                        onChange: function (result,item) {
                        $('#area_id').val(item.value);
                        $('#area_name').text(item.label);
                    },
                    lastPos:[pos],
                    onConfirm: function (result) {
                    }
                });
            });
        })();

        (function () {
            var data = {:json_encode($business_list)};
            var pos = 0;
            var v = '{$m.business_id}';
            if(v){
                var label = '';
                for(var i=0,l=data.length;i<l;i++){
                    if(data[i].value == v){
                        pos = i;
                        label = data[i].label;
                        break;
                    }
                }
                if(label){
                    $('#business_name').text(label);
                }
            }
            $('#business_name,#business_name_down').on('click', function () {
                weui.picker(data,{
                    id:'business_name',
                    lastPos:[pos],
                    title:'选择办理的业务',
                    onChange: function (result,item) {
                        $('#business_id').val(item.value);
                        $('#business_name').text(item.label);
                    }
                });
            });
        })();

        $('#appoint_date,#appoint_date_down').on('click', function () {
            var date = eval("{$m.appoint_date?'new Date(Date.parse(\\''. str_replace('-','/',$m['appoint_date']) .'\\'))':'new Date()'}");
            weui.datePicker({
                id:'appoint_date',
                lastPos:[0,date.getMonth(),date.getDate()-1],
                start: new Date().getFullYear(),
                title:'选择预约日期',
                end: new Date().getFullYear()+1,
                onChange: function (result) {
                    var d = c.dateFormatter(result);
                    $('#appoint_date').text(d);
                    $('#appoint_date_field').val(d);
                },
                onConfirm: function (result) {
//                    console.log(result);
                }
            });
        });
        $('#appoint_during,#appoint_during_down').on('click', function () {
            weui.picker([
                {
                    label:'30分钟',
                    value:30
                },
                {
                    label:'60分钟',
                    value:60
                }
            ],{
                title:'选择时间长度',
                lastPos:['{$m.appoint_during?$m.appoint_during/30-1:0}'],
                id:'appoint_during',
                onChange: function (result,item) {
                    $('#appoint_during').text(item.label);
                    $('#appoint_during_hidden').val(item.value);
                }
            });
        });
        $("#appoint_time,#appoint_time_down").on('click', function () {
            var pos = 0;
            var hour =  new Date().getHours() + 1;
            if(hour > 11 && hour < 14){
                pos = 3;
            }else if(hour > 17){
                pos = 6;
            }else if(hour > 9){
                pos = hour - 9;
            }else{
                pos = 0;
            }
            var hours = [
                {
                    label:'9点',
                    value:'09'
                },
                {
                    label:'10点',
                    value:10
                },
                {
                    label:'11点',
                    value:11
                },
                {
                    label:'14点',
                    value:14
                },
                {
                    label:'15点',
                    value:15
                },
                {
                    label:'16点',
                    value:16
                },
                {
                    label:'17点',
                    value:17
                }
            ];
            var minutes = [
                {
                    label:'00分',
                    value:'00'
                },
                {
                    label:'30分',
                    value:30
                }
            ];
            var time = '{$m._time}';
            var pos2 = 0;
            if(time){
                time = eval('('+ time +')');
                for(var i=0,l=hours.length;i<l;i++){
                    if(parseInt(hours[i].value) == time[0]){
                        pos = i;
                        break;
                    }
                }
                pos2 = time[1]>0?1:0;
            }

            weui.picker(hours,minutes,{
                id:'appoint_time',
                lastPos:[pos,pos2],
                title:'选择预约时间',
                onChange: function (result,item) {
                    $('#appoint_time').text(result.join(':'));
                    $('#appoint_time_hidden').val(result.join(':'));
                }
            });
        });
        $('#submitBtn').on('click', function () {
            var postData = {};
            var is_valid = true;
            $('#form1').find('input[name],textarea[name]').each(function () {
                if(!this.value.trim() && this.name != 'address'){
                    is_valid = false;
                    ui.msg($(this).attr('placeholder'));
                    return false;
                }
                postData[this.name] = this.value.trim();
            });
            if(is_valid){
                if(!c.isIdentityCodeValid($('#identity').val().trim())){
                    ui.msg('请输入正确的身份证号码');
                    return;
                }
                if(!c.isPhoneValid($('#telephone').val().trim())){
                    ui.msg('请输入正确的手机号码');
                    return;
                }
                postData.id = '{$m.id}';
                ui.toast.show();
                $.post("{:U('save')}",postData, function (rt) {
                    ui.toast.hide();
                    if(rt.status==1){
                        location.href = "{:U('saveResult')}";
                    }else{
                        ui.msg(rt.info);
                    }
                },'json');
            }

        });
    });

</script>
{/block}
